<template>
  <div class="zuke">
  	<div class="container">
  		<div class="zuke-info">
  			<ul v-for="(item, index) in ['0','1']">
		      <li>入住人{{index+1}}<i class="fr">{{'张鱼饭'}}</i></li>
		      <li>手机号<i class="fr">{{'4500'}}元</i></li>
		      <li>押金<i class="fr">{{'44**************34'}}</i></li>
		      <li>身份证号码<i class="fr">{{'189****3835'}}</i></li>
		    </ul>
  		</div>
	    <ul>
	      <li>租金<i class="fr">￥{{'4500'}}元</i></li>
	      <li>押金<i class="fr">￥{{'4500'}}元</i></li>
	      <li>起始日期：<i class="fr">{{'2017-10-30'}}</i></li>
	      <li>结束日期<i class="fr">{{'2017-10-30'}}</i></li>
	    </ul>
	    <div class="set-time">
	    	<i>一个月</i>
	    	<i>三个月</i>
	    	<i>半年</i>
	    	<i>一年</i>
	    </div>
  	</div>
    <div class="btn">
    	<span class="send">提交</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'zu-ke',
    data () {
      return {
      }
    }
  }
</script>
<style lang="less">
  .zuke {
  	box-sizing: border-box;
  	.container {
  		height: ~"calc(100vh - 70px)";
  		overflow: auto;
  		padding-bottom: 70px;
  		.zuke-info {
  			border-bottom: 6px solid #F3F3F3;
  		}
  	}
    .btn {
    	position: absolute;
    	bottom: 0;
    	left: 0;
		span {
	      background-color:#ff9600;
	      display: inline-block;
	      height: 45px;
	      line-height: 45px;
	      width:100vw;
	      position: relative;
	      bottom: 0;
	      left: 0;
	      color: white;
	      text-align: center;
	      margin-top: 50px;
	    }
    } 
    ul {
      li {
      	padding: 0 18px;
      	box-sizing: border-box;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #F3F3F3;
        width: 100%;
        font-size: 15px;
        text-align: left;
        i {
          font-style: normal;
        }
        .fl {
          float: left;
          height: 20px;
          line-height: 20px;
          margin-top: 14px;
          text-align: center;
        }
        .fr {
          float: right;
          color: #777777;
        }
      }
    }
    .set-time {
    	text-align: center;
    	margin-top:10px;
    	i {
    		display: inline-block;
    		font-style: normal;
    		text-align: center;
    		height: 28px;
    		width: 78px;
    		line-height: 28px;
    		font-size: 12px;
    		border: 1px solid gray;
    		margin-left: .175rem;
    		border-radius: 3px;
    	}
    }
  }
</style>
